<template>
	<view class="presBox flex-column flex-end" :class="{ presBg: guideStatus }">
		<!-- 引导图 -->
		<template v-if="!guideStatus">
			<m-guide></m-guide>
		</template>
		<!-- 过渡页 -->
		<template v-if="guideStatus">
			<view class="topBox flex-column ai-center jc-flex-end pb-200">
				<text class="mt-200 fs40">全新遊戲平臺</text>
				<text class="fs24 mt-24 text-grey">透明穩定，使用者信賴的首選平臺</text>
				<view class="btnn" @click="skip" >立即體驗</view>
			</view>
		</template>
		<!-- 过渡页 加载配置  检测更新  检测本地存储 -->
		<view class="skip flex-center" @click="skip" v-if="!checkUpLoading && !isUpdate && guideStatus">
			<text>{{ times }}</text>
			<text></text>
			<text>跳過</text>
		</view>
	</view>
</template>

<script>
import { GetAppVersion, GetEnum, GetSysCoin } from '@/api/Ctrls.js';
import { mapState } from 'vuex';
import Updater from '@/utils/upgrade.js';
export default {
	data() {
		return {
			topImg: require('../static/images/pages/guide/pres.png'),
			checkUpLoading: true,
			isUpdate: false,
			timer: 0,
			times: 3,
			guideStatus: true
		};
	},
	onLoad({ invcode }) {
		this.getSystemInfo();
		if (invcode) {
			this.Cookie.set('Invcode', invcode);
		}
	},
	onShow() {
		this.init();
		//关闭APP顶部状态朗
		// #ifdef APP-PLUS
		plus.navigator.setFullscreen(true);
		// #endif
	},
	onHide() {
		//离开页面清除定时器并且打开顶部状态栏
		clearTimeout(this.timer);
		// #ifdef APP-PLUS
		plus.navigator.setFullscreen(false);
		// #endif
	},
	beforeDestroy() {
		//离开页面清除定时器并且打开顶部状态栏
		clearTimeout(this.timer);
		// #ifdef APP-PLUS
		plus.navigator.setFullscreen(false);
		// #endif
	},
	methods: {
		async init() {
			try {
				this.guideStatus = !!uni.getStorageSync('guide');
				// this.guideStatus = false
				// #ifdef APP-PLUS
				this.guideStatus = !!uni.getStorageSync('guide');
				// #endif
				this.guideStatus = true
				//检测版本
				const { isUpdate } = await Updater.check();
				console.log('isUpdate===>', isUpdate);
				if (!isUpdate) {
					this.checkUpLoading = false;
					if (!this.guideStatus) return;
					this.timeOut();
				}
			} catch (e) {
				console.log(e);
				this.checkUpLoading = false;
				if (!this.guideStatus) return;
				this.timeOut();
			}
		},
		// 获取系统信息
		async getSystemInfo() {
			let that = this;
			const res = await uni.getSystemInfoSync();
			const { language, uniPlatform, statusBarHeight } = res;
			this.$store.commit('setting/SET_SYSINFO', res);
			this.Cookie.set('PlatForm', uniPlatform);
			this.$store.commit('general/SET_TOPNAV', statusBarHeight); //导航栏高度
			// this.$store.commit('setting/SET_LOCALEIDX', uni.getLocale())	//设置初始语言
			// // //没有设置默认跟随系统
		},
		timeOut() {
			clearTimeout(this.timer);
			if (this.times == 0) {
				this.skip();
				return;
			}
			this.timer = setTimeout(() => {
				this.times--;
				this.timeOut();
			}, 1000)
		},
		skip() {
			clearTimeout(this.timer);
			this.Jump({
				url: '/pages/farm/index',
				mode: 3
			});
		}
	}
};
</script>

<style lang="scss">
.presBox {
	width: 100%;
	height: 100%;
	align-items: center;

	.topBox {
		width: 100%;
		height: 100%;
		background-image: url('../static/images/pages/guide/pres.png');
		background-size: 100%, 100%;
		background-position: center;
	}

	.footerBox {
		box-shadow: 0rpx -5rpx 15rpx 1rpx #dbdbdb;
		position: relative;
		z-index: 9;
		width: 100%;
		text-align: center;
		background-color: #fff;
		padding-bottom: var(--window-bottom);
	}
}

.presBg {
	// background: linear-gradient(180deg, #2dc03a 0%, #e9c51e 100%);
	background-size: 100%;
	// padding-bottom: 20rpx;
	box-sizing: border-box;
}

.presBg2 {
	background-size: 100%;
	// background-image: url('../static/images/pages/guide/guide01.jpg');
}

.skip {
	position: fixed;
	z-index: 99;
	right: 24rpx;
	/* #ifdef H5 */
	top: 24rpx;
	/* #endif */

	/* #ifdef APP-PLUS */
	top: calc(var(--status-bar-height) + 24rpx);
	/* #endif */
	background: rgba(155, 155, 155, 0.3);
	border-radius: 50rpx;
	padding: 16rpx 24rpx;

	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #fff;

	text:nth-of-type(2) {
		display: block;
		width: 2rpx;
		height: 28rpx;
		background: #fff;
		margin: 0 15rpx;
	}
}
.btnn {
	margin-top: 60rpx;
	width: 265rpx;
	height: 68rpx;
	background: linear-gradient(90deg, #6c89ff 0%, #74aafd 100%);
	border-radius: 34rpx;
	text-align: center;
	line-height: 68rpx;
}
</style>
